<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link type="text/css" rel="stylesheet" href="style.css" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="alert-engine.js"></script>
</head>
<body>
<h1>Alert Engine</h1>
<ul class="alert-firers" >
	<li><span>Click to show a simple alert</span></li>
</ul>
<div id="alerts" style="border : 1px solid black; padding : 5px; min-height : 50px;"></div>
<script type="text/javascript">
$(".alert-firers li span").alert({
	"appendTo"		: "#alerts",
	"text"			: "Alert text!",
	"fadeOut"		: true ,
	"fadeOutTime"	: 1000 ,
	"addHtml"		: '<span style="color : maroon; margin-left : 5px; ">Additional html!</span>',
	"onFade"		: function () {
		console.log ( "Manual alert fade" );
	},
	"onClose"		: function () {
		console.log ( "Manual alert closed" );
	}
}, function () {
	console.log ( "Manual alert fired." );
});

$(document).ready(function () {

	$.alert({
		"text" 			:	"Google-like alert on load!",
		"showClose"		:	true,
		"fadeIn"		:	true ,
		"fadeInTime"	:	500 ,
		"fadeInDelay"	:	500 ,
		"css"			: 
			{
				"background-color"	:	"#ffc" ,
				"border"			:	"2px solid #ffe475" ,
				"margin-left"		:	"-126px" ,
				"width"				:	"250px" ,
				"padding"			:	"2px" ,
				"position"			:	"fixed" ,
				"top"				:	"70px" ,
				"left"				:	"50%" ,
				"z-index"			:	"1000"
		},
		"cssClose"		:	
			{
				"position"	:	"absolute" ,
				"right"		:	"5px" ,
				"cursor"	:	"pointer"
		},
		"onStart"		:	function () {
			console.log ( "onLoad Alert : Started" );
		},
		"onVisible"		:	function () {
			console.log ( "onLoad Alert : Visible" );
		},
		"onClosed"		:	function () {
			console.log ( "onLoad Alert : Closed" );
		}
	}, function () {
			console.log ( "Regular Callback" );
	});

});
</script>
</body>
</html>